<template>
  <div>
    <div>
      <div>
        <el-table stripe style="width: 100%" :data="[result]">
          <el-table-column label="开始测试时间" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.time.start_at | formatDate }}</span>
            </template>
          </el-table-column>

          <el-table-column label="持续时间" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.time.duration | numFilter }} s</span>
            </template>
          </el-table-column>

          <el-table-column label="Total" width="140">
            <template slot-scope="scope">
              <el-tag effect="plain">{{ scope.row.stat.testsRun }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="Success" width="140">
            <template slot-scope="scope">
              <el-tag type="success" effect="plain">{{
                scope.row.stat.successes
              }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="Failed" width="140">
            <template slot-scope="scope">
              <el-tag type="danger" effect="plain">{{
                scope.row.stat.failures
              }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="Error" width="140">
            <template slot-scope="scope">
              <el-tag type="warning" effect="plain">{{
                scope.row.stat.errors
              }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="Platform">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>HttpRunner: {{ scope.row.platform.httprunner_version }}</p>
                <p>Python: {{ scope.row.platform.python_version }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium" effect="plain">{{
                    scope.row.platform.platform
                  }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <br />
    <br />

    <slot v-for="item in result.details">
      <div :key="11">
        <span style="font-weight: bold; font-size: medium">{{
          item.name
        }}</span>

        <el-popover placement="top-start" width="400" trigger="hover">
          <pre class="code-block">{{ item.in_out }}</pre>
          <el-button slot="reference" round type="text">
            parameters & output
          </el-button>
        </el-popover>
      </div>
      <el-table
        :data="item.records"
        style="width: 100%"
        border
        :header-cell-style="{ textAlign: 'center', background: '#F8F8FA' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column type="expand" fixed>
          <template slot-scope="props">
            <el-tabs v-model="activeName">
              <el-tab-pane label="Request">
                <pre
                  class="code-block"
                  v-html="handleRequest(props.row.meta_data.request)"
                ></pre>
              </el-tab-pane>
              <el-tab-pane
                label="Content"
                v-if="props.row.meta_data.response.content !== null"
              >
                <pre
                  class="code-block"
                  v-html="handleContent(props.row.meta_data.response.content)"
                ></pre>
              </el-tab-pane>
              <el-tab-pane label="Response">
                <pre
                  class="code-block"
                  v-html="handleResponse(props.row.meta_data.response)"
                ></pre>
              </el-tab-pane>
              <el-tab-pane
                label="Validators"
                v-if="props.row.meta_data.validators.length !== 0"
              >
                <pre
                  class="code-block"
                  v-html="props.row.meta_data.validators"
                ></pre>
              </el-tab-pane>
              <el-tab-pane label="Exception" v-if="props.row.attachment !== ''">
                <pre class="code-block" v-html="props.row.attachment"></pre>
              </el-tab-pane>
              <!-- <el-tab-pane
                label="Extract"
                v-if="props.row.meta_data.response.content !== null"
              >
                {{ props.row.meta_data.response.content }}
                <content
                  :data="props.row.meta_data.response.content"
                ></content>
              </el-tab-pane> -->
            </el-tabs>
          </template>
        </el-table-column>

        <el-table-column label="名 称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="请求地址">
          <template slot-scope="scope">
            <span>{{ scope.row.meta_data.request.url }}</span>
          </template>
        </el-table-column>

        <el-table-column label="请求方法">
          <template slot-scope="scope">
            <el-tag
              :type="tagType[scope.row.meta_data.request.method]"
              effect="plain"
              >{{ scope.row.meta_data.request.method }}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column label="响应时间 (ms)">
          <template slot-scope="scope">
            <span>{{ scope.row.meta_data.response.elapsed_ms }}</span>
          </template>
        </el-table-column>

        <el-table-column label="测试结果">
          <template slot-scope="scope">
            <div>
              <el-tag
                :type="scope.row.status == 'success' ? 'success' : 'danger'"
                >{{ scope.row.status }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </slot>
  </div>
</template>

<script>
import { formatDate } from "@/utils/common";
// import content from "./content";

export default {
  filters: {
    numFilter(value) {
      const f = Math.round(value * Math.pow(10, 3)) / Math.pow(10, 3);
      let s = f.toString();
      const rs = s.indexOf(".");
      if (rs < 0) {
        s += ".";
      }
      for (let i = s.length - s.indexOf("."); i <= 3; i++) {
        s += "0";
      }
      return s;
    },

    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },

  name: "Report",
  props: {
    result: {
      require: true
    }
  },

  components: {
    // content
  },
  data() {
    return {
      // 接口请求颜色标签
      tagType: {
        POST: "success",
        DELETE: "danger",
        PATCH: "info",
        GET: "primary",
        PUT: "warning",
        OPTIONS: "primary",
        HEAD: "success"
      },
      activeName: ""
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleRequest(request) {
      const keys = ["start_timestamp"];
      keys.forEach(function(item) {
        delete request[item];
      });
      try {
        request["body"] = JSON.parse(request["body"]);
      } catch (e) {}
      request = JSON.stringify(request, null, 2);
      return request;
    },

    handleContent(content) {
      try {
        content = JSON.parse(content);
      } catch (e) {}
      return content;
    },

    handleResponse(response) {
      const keys = [
        "response_time_ms",
        "encoding",
        "ok",
        "reason",
        "url",
        "text",
        "json",
        "content_size",
        "content_type"
      ];
      keys.forEach(function(item) {
        delete response[item];
      });
      try {
        response["content"] = JSON.parse(response["content"]);
      } catch (e) {}
      response = JSON.stringify(response, null, 2);
      return response;
    }
  }
};
</script>

<style lang="less">
.summary-title {
  text-align: center;
  color: #313de0;
  font-family: "微软雅黑", "宋体", "黑体", Arial;
  font-size: 20px;
  font-weight: bold;
  height: 25px;
  line-height: 25px;
  margin: 18px 0 !important;
  padding: 8px 0 5px 5px;
}
</style>
